<template>
  <div>
    <div style="position: absolute;top:10px;bottom:10px;left:10px;right:10px">
      <Card style="height: 100%" :disHover="true">
        <Row v-show="showSearch">
          <Col :span="24">
          <div style="width:100%;display:-webkit-inline-box">
            <slot name="searchForm"></slot>
            <Button @click="loadData" type="primary" icon="search" style="margin-right: 5px">搜索</Button>
            <Button @click="handleReset" type="primary" >重置</Button>
          </div>
          </Col>
        </Row>
        <Row class="">
          <iframe :src="reportSrc" :style="{width:'100%',height:tableHeight+'px'}" ref="reportFrame" frameborder="false"></iframe>
        </Row>
        <Row class="page" v-show="showPage">
          <Col :span="18">
          <Page :current="mmSearchFormData.pageNumber" :total="total" :page-size="mmSearchFormData.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[50,100,200]" size="small" show-total show-elevator show-sizer></Page>
          </Col>
          <Col :span="6" style="text-align: right">
          <Button type="info" icon="ios-refresh-outline" @click="handleSearch">刷新</Button>
          <Button type="info" v-show="showExport" icon="ios-download-outline" size="small">导出</Button>
          </Col>
        </Row>
      </Card>
    </div>
    <div style="z-index:0;position: absolute;top:10px;bottom:10px;left:10px;right:10px" ref="mainHeightDiv">
    </div>
  </div>
</template>
<script>
  import config from '@/config'
  const baseUrl   = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
  export default {
    name: 'ureportPanel',
    components: {
    },
    data () {
      return {
        reportSrc:'',
        baseUrl:baseUrl+'/ureport/preview?',
        pageNumber:1,
        total:0,
        pageSize:1,
        tableHeight:600,
        mmSearchFormData:{
          pageNumber: 1,
          pageSize: 50
        }
      };
    },
    mounted () {
      this.tableHeight = this.$refs.mainHeightDiv.offsetHeight - this.topHeight;
      if(this.autoLoad) {
        this.loadData();
      }
    },
    props: {
      topHeight : {
        type: Number,
        default: 70
      },
      bottomHeight : {
        type: Number,
        default: 65
      },
      autoLoad: {
        type: Boolean,
        default: true
      },
      showPage : {
        type: Boolean,
        required: false
      },
      showExport : {
        type: Boolean,
        required: false
      },
      showSearch : {
        type: Boolean,
        required: false
      },
      report: {
        type: String,
        default:''
      },
      searchFormData:{
        type:Object,
        default:''
      }

    },
    watch: {
    },
    methods: {
      handleInput() {
        this.$emit('input', this.currentValue?this.currentValue:"");
      },
      loadData() {
        this.reportSrc = this.baseUrl + this.report ;
        for (let it in this.searchFormData) {
          this.reportSrc += '&'+encodeURIComponent(it) + '=' + encodeURIComponent(this.searchFormData[it]) ;
        }
      },
      handleSearch () {
        this.loadData()
      },
      handleReset() {
      },
      changePage() {
      },
      changePageSize(ps) {
        this.mmSearchFormData.pageNumber = 1
        this.mmSearchFormData.pageSize = ps
        this.loadData()
      },
    }
  };
</script>
